<template>
	<view class="yp " ref="SecondCommon">
		<viiew class='SecondCommon' v-if="IsLoadOk">
			<!-- 导航栏 -->
			<view class="nav padd20 flex just-start ali-cen">
				<text class="cuIcon-back fo-40 mr20" @click="HideSecondCommon"></text>
				<view>回复{{ total }}</view>
			</view>
			<!-- 占位 -->


			<!-- 楼主 -->
			<!-- 评论卡片 -->
			<view class="CommonCard_one paddtb20 paddlr30 bg-White mt90">

				<!-- 评论卡片-头部 -->
				<view class="Card-hd wid1p flex just-spa-bet ali-cen">
					<view class="flex just-spa-bet ali-cen">
						<image :src="CommonList.UserInfo[0].avatar ? CommonList.UserInfo[0].avatar : 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'"
						 class="yicon-lg radius50p mr20" mode="scaleToFill"></image>
						<view class="info">
							<view class="">{{ CommonList.UserInfo[0].Nickname }}</view>
							<text class="fo-gray fo-20">{{ $tool.friendlyDate(new Date(CommonList.commonTime)) }}</text>
						</view>
					</view>
					<view class="fo-gray" @click="onlike(CommonList, '楼主')">
						<text class="mr10" :class="CommonList.iSlike ? 'cuIcon-appreciatefill' : 'cuIcon-appreciate'"></text>
						<text>{{ CommonList.likeCount }}</text>
					</view>
				</view>
				<!-- 评论卡片-文字内容 -->
				<view class="card-content pl100 mt20">
					<text selectable='true'>{{ CommonList.commonValue }}</text>
				</view>

			</view>

			<!-- 占位 -->
			<view style="background-color: #f5f5f5;height: 20rpx;"></view>
			<view class="padd30 bg-White font-wei600 fo-28">全部回复</view>

			<!-- 余下评论 -->
			<view class="CommonCard_other paddtb20 paddlr30 bg-White" v-for="(i,j) in CommonList.SecondList" @touchmove="commonBlockTouchmove">
				<!-- 评论卡片-头部 -->
				<view class="Card-hd wid1p flex just-spa-bet ali-cen">
					<view class="flex just-spa-bet ali-cen">
						<image :src="i.UserInfo[0].avatar ? i.UserInfo[0].avatar : 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'"
						 class="yicon-lg radius50p mr20" mode="scaleToFill"></image>
						<view class="info">
							<view class="">{{ i.UserInfo[0].Nickname }}</view>
							<text class="fo-gray fo-20">{{ $tool.friendlyDate(new Date(i.commonTime)) }}</text>
						</view>
					</view>
					<view class="fo-gray" @click="onlike(i, '余楼',j)">
						<text class="mr10" :class="i.iSlike ? 'cuIcon-appreciatefill' : 'cuIcon-appreciate'"></text>
						<text>{{ i.likeCount }}</text>
					</view>
				</view>
				<!-- 评论卡片-文字内容 -->
				<view class="card-content pl100 mt20" @click="onReply(i)">
					<span v-if="i.Second_appointed_id && i.reply_UseId">
						<text class="mr10">回复</text>
						<span class="fo-blue">{{ i.ReplyToUserInfo[0].Nickname }}：</span>
					</span>
					<text selectable='true'>{{ i.commonValue }}</text>

				</view>
				<!-- 评论卡片-底部边框 -->
				<view class="line-gray pl100 mt30"></view>
			</view>
			<!-- <view style="height: 140rpx; background-color: #fff;"></view> -->
			<!-- 底部评论 -->
			<foot-common ref="FootCommon_Second" :class="CommonList.SecondList.length > 2 ? 'FootCommon' : ''" :articleId="opt.ArticleId"
			 @FreshList="SelCommon" :SecondInfo.sync="SecondInfo" OnlyInput="true" @changeSecondCommonLen='changeSecondCommonLen'></foot-common>
			 
			 <!-- 加载更多 -->
			 <u-loadmore v-if="CommonList.SecondList.length >= 10" class="padd20" :status="LoadMoreStatus" icon-type="flower" />
			 <!-- 底部占位 -->
			 <view style="height: 140rpx; background-color: #fff;"></view>
		</viiew>
		<template v-else>
			<image class="center-center" src="../../static/img/loading.gif"></image>
		</template>
	</view>
</template>

<script>
	let timers;
	const {
		windowWidth,
		windowHeight
	} = uni.getSystemInfoSync();
	import {
		API$SelCommonList,
		API$CommonLike
	} from '../../common/API/community.js';
	import FootCommon from './conpoment/FootCommon.vue';
	export default {
		props: {
			isShow_H5_Mask: {
				type: Boolean,
				default: false
			},
			SecondInfo: {
				// 二级评论弹窗 请求接口需要的数据
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		name: 'SecondCommon',
		components: {
			FootCommon
		},
		data() {
			return {
				opt: '', // 页面传过来的参数
				CommonList: {},
				IsLoadOk: false, // 接口数据是否加载成功~

				isLoading: false ,// 当前是否触底加载中 加载中不可操作
				LoadMoreStatus: 'loadmore', // 加载更多状态
				
				total:0, // 二级评论总数
				SelJson: {
					pageNum: 0,
					pageSize: 10
				},
			};
		},
		watch: {
			isShow_H5_Mask() {
				/*
					显示：接口刷新  
					隐藏：清空需要的数据
				*/
				if (this.isShow_H5_Mask) {
					this.SelCommon();
				} else {
					this.$emit('update:SecondInfo', {});
					this.IsLoadOk = false;
					this.SelJson.pageNum = 0;
					this.SelJson.pageSize = 10;
					
					// #ifdef H5
					document.body.style.overflow = 'scroll';
					// #endif
					// #ifdef APP-PLUS
					this.$emit('update:overflow', 'scroll');
					// #endif
				}
				// console.log('监听二级isShow_H5_Mask的变化', this.isShow_H5_Mask);
			}
		},
		methods: {
			// 查询评论 (二级评论)
			async SelCommon() {
				let SelJson = {
					pageSize: this.SelJson.pageSize,
					pageNum: this.SelJson.pageNum,
					articleId: this.SecondInfo.articleId, // 二级评论就不用带这个了（有父ID关联着）  后期后端去掉判断
					UserId: this.$pub.getStorageSync('UserInfo')._id,
					parentId: this.SecondInfo._id // 二级评论的父级ID
				};
				let {
					code,
					msg,
					data,
					total
				} = await API$SelCommonList(SelJson);
				if (code === 200) {
					
					// 分页添加
					if(this.SelJson.pageNum===0){
						this.CommonList = data
					}else{
						for(let i=0;i<data.SecondList.length;i++){
							this.CommonList.SecondList.push(data.SecondList[i])
						}
					}
					
					this.IsLoadOk = true;
					this.isLoading = false; // 结束否触底加载中
					this.total = total
					console.warn(data);
				}
				timers = null
			},
			changeSecondCommonLen(info) {
				this.$emit('changeSecondCommonLenS', info)
			},
			// 隐藏二级评论
			HideSecondCommon() {
				this.$emit('update:isShow_H5_Mask', false);
			},
			// 指定回复
			onReply(e) {
				// uni.$emit('inputFocus',e)
				console.log(e);
				this.$refs.FootCommon_Second.inputFocus({
					parentId: e.parentId, // 一级评论的ID（楼主ID）
					_id: e._id, // 二级评论的被回复ID（二级评论指定回复那个二级评论的数据id）
					reply_UseId: e.UserId, // 二级评论的被回复ID（二级评论指定回复那个二级评论的用户id）
					commonValue: e.commonValue, // 被回复的内容

					// 暂时没用到
					Nickname: e.UserInfo[0].Nickname // 被回复的昵称
				});
			},
			// 评论条点赞
			async onlike(e, TTTpye, index) {
				// 静态改变
				if (TTTpye === '楼主') {
					if (e.iSlike) {
						this.$set(e, 'iSlike', false)
						this.$set(e, 'likeCount', e.likeCount - 1)
					} else {
						this.$set(e, 'iSlike', true)
						this.$set(e, 'likeCount', e.likeCount + 1)
					}
					// 余楼
				} else {
					console.log(this.CommonList.SecondList[index])
					if (e.iSlike) {
						this.CommonList.SecondList[index].iSlike = false
						this.CommonList.SecondList[index].likeCount = this.CommonList.SecondList[index].likeCount - 1
					} else {
						this.CommonList.SecondList[index].iSlike = true
						this.CommonList.SecondList[index].likeCount = this.CommonList.SecondList[index].likeCount + 1
					}
				}


				// 接口改变
				let {
					code,
					msg,
					data,
					iSlike
				} = await API$CommonLike({
					_id: e._id, // 这个id是该条评论的id
					UserId: this.$pub.getStorageSync('UserInfo')._id // 这个id是用户的id
				});
				this.$pub.Toast(msg)
			},
			commonBlockTouchmove(e) {
				if (this.isLoading) return; // 防止重复触底请求加载
				if (this.CommonList.SecondList.length < 10) return; // 没满10条不让触底加载
				let views = uni.createSelectorQuery().select('.SecondCommon');
				views
					.boundingClientRect(data => {
						// let Computeds = windowHeight - 60 -45 -20 + 20 +100 - 44
						//  750 		- 90		 - 20			= 640
						//  屏幕高度		导航栏+占位	 加载更多高度
						console.log('bottom:', Math.floor(data.top + data.height),windowHeight);
						if (Math.floor(Math.floor(data.top + data.height)) <= windowHeight) {
							this.isLoading = true;
							this.LoadMoreStatus = 'loading';

							if (timers) return
							timers = setTimeout(() => {
								if (this.SelJson.pageNum + 1 > Math.floor(this.total / this.SelJson.pageSize)) return (this.LoadMoreStatus =
									'nomore');
								this.SelJson.pageNum++;
								console.log(this.SelJson.pageNum, this.isLoading)
								this.SelCommon();
								console.log('触底了');
							}, 1000)
						}
					})
					.exec();
			}
		}
	};
</script>

<style lang="less" scoped>
	.yp {
		// overflow: hidden;
		height: 80vh;
		overflow: scroll;
		background-color: #fff !important;
		position: relative;

		.nav {
			position: fixed;
			top: 0;
			width: 100%;
			// top: 1px;
			background-color: #fff;
			z-index: 66;
			height: 90rpx;
			line-height: 90rpx;
			// box-sizing: border-box;
		}

		.CommonCard_one {
			position: sticky;
			// top: 45px;
			background-color: #fff;
			z-index: 30;
		}

		.FootCommon {
			// position: sticky;
			bottom: 0;
		}
	}
</style>
